<template>
	<view class="goodList">
		<WaterfallsFlow @addCart='addCart' :wfList='data' @itemTap="navToDetailPage" :hasLogin="hasLogin"
			:showBeforeLogin="isShowPriceUnlogin" />
	</view>
</template>

<script>
	import {
		jugdeShopSetting
	} from '@/api/hotStores/hotStores.js'
	import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow'
	import {
		addToCart
	} from '@/api/cart/cart.js'
	export default {
		name: "hot-goods",
		components: {
			WaterfallsFlow
		},
		props: {
			data: {
				type: Array,
				default: () => []
			},
			isShowPriceUnlogin: {
				type: String | Number,
				default: 1
			},
			hasLogin: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {

			};
		},
		methods: {
			jumpStore(item) {
				jugdeShopSetting({
					code: item.supplierId
				}).then(res => {
					if (res.code == 0) {
						if (JSON.stringify(res.data) != '{}') {
							uni.navigateTo({
								url: `/pages/hotList/hotStore?id=${res.data.supplierId}`
							})
						} else {
							this.$util.msg('该供应商无店铺')
						}
					}
				})
			},
			navToDetailPage(item) {
				let id = item.goodsId;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
			addCart(item) {
				if (!this.hasLogin) {
					uni.showModal({
						title: '提示',
						content: '您还未登录，不能进行此操作',
						confirmText: '去登录',
						cancelText: '取消',
						success: (suc) => {
							if (suc.confirm) {
								uni.navigateTo({
									url: '/pages/public/login'
								})
							}
						}
					})
				} else {
					let pType;
					let qType;
					if (item.goodsSourceType === 0) {
						pType = '02';
						qType = 1;
					} else {
						pType = '01';
						qType = 2;
					}
					const good = {
						protocolGoodsId: item.goodsId,
						protocolId: item.protocolId,
						protocolType: pType,
						remainAmount: 1
					}
					const params = {
						areaId: uni.getStorageSync('areaId'),
						goodsId: item.goodsId,
						num: 1
					}
					addToCart(params).then(res => {
						if (res.code === 0) {
							this.$util.msg('加入购物车成功')
						} else if (res.code === 1001) {
							let msg = ''
							if (res.extra.productAvailability) {
								msg = res.extra.productAvailability.filter(item => !item.canPurchase).map(item =>
									item.message).toString()
							}
							this.$util.msg(res.message + ' ' + msg)
						} else {
							this.$util.msg(res.message)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.goodList {
		display: flex;
		justify-content: space-between;
		flex-flow: row wrap;

		.floor-item {
			width: 48%;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 16rpx;
			font-size: 15px;
			color: $font-color-dark;
			// line-height: 1.8;
			text-align: center;
			margin-bottom: 20rpx;
			position: relative;

			// padding-bottom: 30rpx;
			.item-title {
				height: 40px;
				text-align: left;
				color: $font-color-dark;
				font-size: 15px;
				margin-top: 12rpx;
				margin-bottom: 2rpx;
				// overflow: hidden;
				// text-overflow: ellipsis;
			}

			image {
				width: 100%;
				height: 150px;
				border-radius: 6upx;
			}

			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					display: flex;
					flex-direction: column;

					.integral {
						color: #F6283D;
						font-size: 15px;
						// margin: 4rpx 4rpx 0 4rpx;

						&:before {
							background: url(../../static/money.png) no-repeat;
							width: 24rpx;
							height: 24rpx;
							margin-right: 4rpx;
							display: inline-block;
							content: '';
							background-size: contain;
						}

						&:after {
							margin-left: 4rpx;
							content: '积分';
							color: #909090;
							font-size: 13px;
						}
					}

					.price {
						padding-left: 28rpx;
						text-align: left;
						display: block;
						font-size: 13px;
						color: #646464;
					}
				}

				.right {
					display: flex;
					align-items: center;

					image {
						width: 65rpx;
						height: 60rpx;
					}
				}
			}
		}
	}
</style>
